<template>
    <div class="buyProduct">
        <div class="buyInfo">
            <div class="product-img">
                <img :src="good_detail.cover" class="img" alt="">
            </div>
            <div class="product-info">
                <div class="flex">
                    <div class="left">
                        <h1 class="name">{{good_detail.goods_name}}</h1>
                        <p class="desc">尺寸{{good_detail.size}}</p>
                    </div>
                    <div class="right">
                        <h2 class="price">价格{{good_detail.min_price}}</h2>
                    </div>
                </div>
                <div class="flex center">
                    <div class="left">
                        <p class="size">尺寸</p>
                        <p class="desc">{{good_detail.size}}</p>
                    </div>
                    <div class="right">
                        <span class="iconfont iconjiantou"></span>
                    </div>
                </div>
                <div class="flex center">
                    <div class="left">
                        <p class="size">材质</p>
                        <p class="desc">{{good_detail.material}}</p>
                    </div>
                    <div class="right">
                        <span class="iconfont iconjiantou"></span>
                    </div>
                </div>
                <div class="flex center" style="border:none">
                    <div class="left">
                        <p class="size">数量</p>
                    </div>
                    <div class="right">
                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                    </div>
                </div>
                <div class="buy-btn">
                    <el-button type="primary" class="btn" @click="addCar">加入购物袋</el-button>
                    <span class="iconfont iconlike"></span>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import request from '../../utils/request'
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default{
    data(){
        return{
            num: 1,
            id:null,
            good_detail:{},
            options: regionData,
            selectedOptions: [],

        }
    },
    created:function(){
        this.id = this.$route.query.id
        this.getGoodDetail()
    },
    methods: {
        handleChange (value) {
            console.log(value)
        },
        getGoodDetail(){
            request.post('/goods/getGoodsDetail',{id:this.id}).then(res=>{
                this.good_detail = res.data
            })
        },
        addCar(){
            var token = localStorage.getItem('token')
            if(!token){
                this.$navTo('/login')
                return;
            }else{
                request.post('cart/addCart',{goods_id:this.id,sku_id:14,num:this.num}).then(res=>{
                    this.$message({message:res.msg,type:res.code == 200 ? 'success' : 'warning'})
                })
            }

        }
    },
}
</script>
<style lang="scss" scoped>
.buyProduct{
    padding-top: 40px;
    .buyInfo{
        display: flex;
        .product-img{
            width: 50%;
            .img{
                width: 100%;
                height: auto;
            }
        }
        .product-info{
            flex: 1;
            padding-left: 40px;
            .flex{
                display: flex;
                padding: 20px 0;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
                &.center{
                    align-items: center;
                }
                .name{
                    margin: 0;
                    font-size: 18px;
                    color: #111;
                    font-weight: 700;
                    line-height: 26px;
                    margin-bottom: 5px;
                }
                .size{
                    font-size: 14px;
                    color: #484848;
                    margin: 0;
                    margin-bottom: 5px;
                }
                .desc{
                    font-size: 12px;
                    color: #484848;
                    line-height: 14px;
                    margin: 0;
                }
                .price{
                    margin: 0;
                    font-size: 18px;
                    line-height: 18px;
                }
                .iconfont{
                    font-size: 18px;
                }
            }
            .buy-btn{
                text-align: center;
                padding: 20px 0;
                .btn{
                    border-radius: 40px;
                    width: 50%;
                }
                .iconfont {
                    display: inline-block;
                    height: 40px;
                    width: 40px;
                    background: #eee;
                    border-radius: 20px;
                    vertical-align: top;
                    line-height: 40px;
                    text-align: center;
                    font-size: 20px;
                    color: #444;
                    margin-left: 20px;
                }
            }
        }
    }
}
</style>